<template>
  <div>
    <table-title v-if="!isAddVideo" tableTitle="视频列表"></table-title>
    <div class="table-wrap">
      <el-table :data="videoList">
        <el-table-column label="视频名称" prop="Vname"></el-table-column>
        <el-table-column label="绑定课程" prop="Vstate"></el-table-column>
        <el-table-column label="视频时长" prop="Vtime"></el-table-column>
        <el-table-column label="发布日期">
          <template slot-scope="scope">
            <div>
              {{ new Date(scope.row.createAt).toLocaleString() }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div>
              <el-link
                v-show="!isAddVideo"
                type="primary"
                @click="edit(scope.row)"
                v-power
                >编辑</el-link
              >
              <el-link
                v-show="!isAddVideo"
                type="danger"
                @click="del(scope.row.ID)"
                v-power
                >删除</el-link
              >
              <el-link
                @click="addDirVideo(scope.row._id)"
                v-show="isAddVideo"
                type="primary"
                >添加</el-link
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="pageChange"
        background
        :page-size="3"
        :total="count"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import tableTitle from '../../components/tableTitle.vue'
import { mapActions, mapGetters } from 'vuex'
import { _delVideo } from '../../api/video'
import { _addDirVideo } from '../../api/courseadd'
export default {
  components: { tableTitle },
  props: ['isAddVideo', 'dirid'],
  data () {
    return {
      pageStart: 1,
      searchText: ''
    }
  },
  computed: {
    ...mapGetters('videoStore', ['videoList', 'count']),
    dirId () {
      //目录id
      return this.$store.state.dirID
    }
  },
  created () {
    // 触发vuex的 分模块的actions
    this.videoAction({
      pageStart: this.pageStart,
      searchText: this.searchText
    })
  },

  methods: {
    ...mapActions('videoStore', ['videoAction']),
    // 给对应课程目录添加视频
    async addDirVideo (_id) {
      //
      var res = await _addDirVideo({
        cid: this.$route.query._id, //课程_id
        _id: this.dirid, //目录_id
        Vid: _id //视频_id
      })
      console.log(res)
      this.$message.success('添加成功')
      this.$emit('close', false)

      // 添加视频成功后 返回的视频列表 传给父组件
      this.$emit('sendvideolist', res.data.list)
    },
    edit (row) {
      // 点击编辑 把当前行数据传给兄弟组件
      this.$bus.$emit('sendrow', row, this.pageStart)
    },
    async del (ID) {
      // 删除视频接口
      console.log(ID)
      var res = await _delVideo(ID)
      console.log(res)
      this.$message.success('删除成功')
      // 删除  触发vuex中的actions 重新获取列表
      this.videoAction({
        pageStart: this.pageStart,
        searchText: this.searchText
      })
    },
    pageChange (val) {
      this.pageStart = val
      // 分页改变  触发vuex中的actions 重新获取列表
      this.videoAction({
        pageStart: this.pageStart,
        searchText: this.searchText
      })
    }
  }
}
</script>
<style lang="less" scoped>
.table-wrap {
  width: 80%;
  margin: 0 auto;
}
</style>
